<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Input Limiter Demo</title>
	<link rel="stylesheet" type="text/css" href="jquery.inputlimiter.1.0.css" />
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="jquery.inputlimiter.1.3.1.min.js"></script>
	<style type="text/css">
		body {
			font-family: verdana;
		}
		#limitingtext {
			color: #333;
			font-size: 90%;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			// Change default to count new lines as two characters
			$.fn.inputlimiter.defaults.lineReturnCount = 2;
			
			// Default
			$('textarea').inputlimiter();

			// Limit by Words
			$('#textarea3').inputlimiter({
				limit: 10,
				limitBy: 'words',
				remText: 'You only have %n word%s remaining...',
				limitText: 'Field limited to %n word%s.'
			});
			
			// Make it more personal
			$('#text1').inputlimiter({
				limit: 50,
				remText: 'You only have %n character%s remaining...',
				remFullText: 'Stop typing! You\'re not allowed any more characters!',
				limitText: 'You\'re allowed to input %n character%s into this field.'

			});
			
			// The limiter will display the text in Spanish
			$('#text2').inputlimiter({
				limit: 50,
				remText: '%n caractere%s restantes.',
				limitText: 'Campo limitado a %n caractere%s.'
			});

			// The limiter will display the text in French
			$('#text2_1').inputlimiter({
				limit: 50,
				remText: '%n caract&egrave;re%s restants.',
				limitText: 'Champ limit&eacute; &agrave; %n caract&egrave;re%s.',
				zeroPlural: false
			});

			// This input will display the limiter info in the existing span tag
			$('#text3').inputlimiter({
				limit: 30,
				boxId: 'limitingtext',
				boxAttach: false
			});

			$('#text4').inputlimiter({
				limit: 40,
				remTextFilter: function (opts, charsRemaining) {
					var charsTyped = opts.limit - charsRemaining;
					return "You have typed " + charsTyped + " character" + ( charsTyped == 1?'':'s' ) + ".<br />" +
						"You have " + charsRemaining + " character" + ( charsRemaining == 1?'':'s' ) + " remaining.";
				},
				limitTextFilter: function (opts) {
					return "This field is limited to " + opts.limit + " character" + ( opts.limit == 1?'':'s' ) + ".";
				}
			});


			// When your remaining characters drops below 13 the lyrics from The Twelve Days of Christmas will be displayed.
			$('#text5').inputlimiter({
				limit: 12,
				remTextFilter: function (opts, charsRemaining) {
					var remText = "The Twelve Days of Christmas";
					if ( charsRemaining == 12 ) {
						remText = "Twelve drummers druming.";
					} else if ( charsRemaining == 11 ) {
						remText = "Eleven pipers piping.";
					} else if ( charsRemaining == 10 ) {
						remText = "Ten lords a' leaping.";
					} else if ( charsRemaining == 9 ) {
						remText = "Nine ladies dancing.";
					} else if ( charsRemaining == 8 ) {
						remText = "Eight maids a' milking.";
					} else if ( charsRemaining == 7 ) {
						remText = "Seven swans a' swimming.";
					} else if ( charsRemaining == 6 ) {
						remText = "Six geese a' laying.";
					} else if ( charsRemaining == 5 ) {
						remText = "Five gold rings.";
					} else if ( charsRemaining == 4 ) {
						remText = "Four calling birds.";
					} else if ( charsRemaining == 3 ) {
						remText = "Three french hens.";
					} else if ( charsRemaining == 2 ) {
						remText = "Two turtle doves.";
					} else if ( charsRemaining == 1 ) {
						remText = "A partridge in a pear tree.";
					}
					return remText;
				}
			});
			
		});
	</script>
</head>
<body>
<h1><a href="http://rustyjeans.com/jquery-plugins/input-limiter/">jQuery Plugin: Input Limiter</a></h1>
<form>
	<fieldset>
		<legend>Default Textareas</legend>
		<label>This textarea will show the limiter info on two lines<br />
		<textarea rows="3" cols="30" id="textarea1"></textarea></label><br />
		
		<label>Since this text area is wider it will show the limiter info on one line<br />
		<textarea rows="5" cols="40" id="textarea2"></textarea></label><br />

<strong>Code:</strong><br />
<pre>$('textarea').inputlimiter();</pre>

	</fieldset>

	<fieldset>
		<legend>Limit by Words</legend>
		<label>This textarea only allows ten words<br />
		<textarea rows="3" cols="30" id="textarea3"></textarea></label><br />

<strong>Code:</strong><br />
<pre>$('#textarea3').inputlimiter({
	limit: 10,
	limitBy: 'words',
	remText: 'You only have %n word%s remaining...',
	limitText: 'Field limited to %n word%s.'
});</pre>

	</fieldset>	
	
	<fieldset>
		<legend>Custom limiter text</legend>
		<label>Make it more personal<br />
		<input type="text" id="text1" size="50" /></label><br />

<strong>Code:</strong><br />
<pre>$('#text1').inputlimiter({
	limit: 50,
	remText: 'You only have %n character%s remaining...',
	remFullText: 'Stop typing! You\'re not allowed any more characters!',
	limitText: 'You\'re allowed to input %n character%s into this field.'
});</pre>

		<label>The limiter will display the text in Spanish<br />
		<input type="text" id="text2" size="50" /></label><br />

<strong>Code:</strong><br />
<pre>$('#text2').inputlimiter({
	limit: 50,
	remText: '%n caractere%s restantes.',
	limitText: 'Campo limitado a %n caractere%s.'
});</pre>

		<label>The limiter will display the text in French<br />
		<input type="text" id="text2_1" size="50" /></label><br />

<strong>Code:</strong><br />
<pre>$('#text2_1').inputlimiter({
	limit: 50,
	remText: '%n caract&egrave;re%s restants.',
	limitText: 'Champ limit&eacute; &agrave; %n caract&egrave;re%s.',
	zeroPlural: false
});</pre>

	</fieldset>

	<fieldset>
		<legend>Alternate Box ID</legend>
		<label>This input will display the limiter info in the existing span tag<br />
		<input type="text" id="text3" size="30" /> <span id="limitingtext">Field limited to 30 characters.</span></label><br />

<strong>Code:</strong><br />
<pre>$('#text3').inputlimiter({
	limit: 30,
	boxId: 'limitingtext',
	boxAttach: false
});</pre>

	</fieldset>

	<fieldset>
		<legend>Custom Text Filters</legend>
		<label>The remText and limitText have custom filters<br />
		<input type="text" id="text4" size="40" /></label><br />
<strong>Code:</strong><br />
<pre>$('#text4').inputlimiter({
	limit: 40,
	remTextFilter: function (opts, charsRemaining) {
		var charsTyped = opts.limit - charsRemaining;
		return "You have typed " + charsTyped + " character" + ( charsTyped == 1?'':'s' ) + ".&lt;br /&gt;" +
			"You have " + charsRemaining + " character" + ( charsRemaining == 1?'':'s' ) + " remaining.";
	},
	limitTextFilter: function (opts) {
		return "This field is limited to " + opts.limit + " character" + ( opts.limit == 1?'':'s' ) + ".";
	}
});</pre>
		<label>When your remaining characters drops below 13 the lyrics from The Twelve Days of Christmas will be displayed.<br />
		<input type="text" id="text5" size="30" /></label><br />

<strong>Code:</strong><br />
<pre>$('#text5').inputlimiter({
	limit: 12,
	remTextFilter: function (opts, charsRemaining) {
		var remText = "The Twelve Days of Christmas";
		if ( charsRemaining == 12 ) {
			remText = "Twelve drummers druming.";
		} else if ( charsRemaining == 11 ) {
			remText = "Eleven pipers piping.";
		} else if ( charsRemaining == 10 ) {
			remText = "Ten lords a' leaping.";
		} else if ( charsRemaining == 9 ) {
			remText = "Nine ladies dancing.";
		} else if ( charsRemaining == 8 ) {
			remText = "Eight maids a' milking.";
		} else if ( charsRemaining == 7 ) {
			remText = "Seven swans a' swimming.";
		} else if ( charsRemaining == 6 ) {
			remText = "Six geese a' laying.";
		} else if ( charsRemaining == 5 ) {
			remText = "Five gold rings.";
		} else if ( charsRemaining == 4 ) {
			remText = "Four calling birds.";
		} else if ( charsRemaining == 3 ) {
			remText = "Three french hens.";
		} else if ( charsRemaining == 2 ) {
			remText = "Two turtle doves.";
		} else if ( charsRemaining == 1 ) {
			remText = "A partridge in a pear tree.";
		}
		return remText;
	}
});</pre>

	</fieldset>

</form>

</body>
</html>
